<?php include_once("protected/extensions/config.php"); ?>
<script type="text/javascript" src="js/List.js"></script>

<style type="text/css">
    #slider {
        margin: 10px;
    }
    .ui-autocomplete-category {
        color: orange;
        font-weight: bold;
        padding: .2em .4em;
        margin: .8em 0 .2em;
        line-height: 1.5;
    }
    .ui-autocomplete {
        max-height: 300px;
        overflow-y: auto;
    }
    ul#icons li {
        cursor: pointer;
        float: left;
        list-style: none outside none;
        margin: 2px;
        padding: 4px;
        position: relative;
    }
    #project-label {
        color: #AA5511;
        margin-bottom: 1em;
    }
    #project-level {
        color: #AA5511;
        font-weight: bold;
    }
    #project-icon {
        float: right;
        height: 32px;
    }
    #project-description {
        margin: 0;
        padding: 0;
        font-size: small;
    }

</style>
<script>
    

    var start = 0;
    var end = 10;
    var max = 10;
    var interval = 10;
    var handleSize = 50;
    
    $(document).ready(bootMorphospecies);
    
    // Inicia configuracoes Javascript
    function bootMorphospecies(){
        configCatComplete('#id','#searchField', 'morphospecies','#filterList');
        configIcons();
        configAutoComplete();
        filter();
        
        //slider();
        $( "#identification" ).dialog({
            autoOpen: false,
            show: "blind",
            hide: "explode",
            minHeight: 150,
            minWidth: 600,
            resizable: false,
            modal: true
        });
        
        //$( "#listSpecimens" ).dialog( "open" );
        //Help message for the filter textbox help tool 
        var helpTip = '<div style="font-weight:normal;">Use this box to filter the results below. Different terms for different categories (e.g.: Institution Code and Collection Code) will result in an AND search. Different terms for the same category, however, will result in an OR search.</div>';

        //Set the help tooltip for the Filter textbox
        
    }
    
    function filter(senderValue){
        if (senderValue == null) {
            start = 0;
        }

        $.ajax({
            type:'POST',
            url:'index.php?r=morphospecies/filter',
            data: {'limit':interval, 'offset':start, 'list':jFilterList},
            dataType: "json",
            success: function(json) {
                var rs = new Object();
                $("#lines").html('');

                max = parseInt(json.count);

                if (start > max) {
                    start = 0;
                }

                $('#start').html(start);

                end = start + interval;

                if (end > max) { 
                    end = max;
                }

                $('#end').html(end);
                $('#max').html(max);

                slider();

                rs = json.result;

                for(var i in rs) {                    
                    insertLine(rs[i]);
                }

                configIcons();
            }
        });
    }
    
    function list(id){
        $('#listSpecimens').load('index.php?r=morphospecies/goToListSpecimens&idmorphospecies='+id);
        $( "#listSpecimens" ).dialog({
            autoOpen: false,
            show: "blind",
            hide: "explode",
            minHeight: 450,
            minWidth: 850,
            resizable: false,
            modal: true
        });
        $( "#listSpecimens" ).dialog( "open" );
    }
 
    function identification(id, genus){
        $( "#identification" ).dialog( "open" );
        $( "#button").button();
        $( "#valueTextField" ).val(genus);
        $( "#idmorphospecies" ).val(id);
    }
    
    function identify(){
        var arraux = $("#valueTextField").val().split(" ", 2);
        var species = arraux[1];
        if (!(species == null)){
            $.ajax({
                type:'POST',
                url:'index.php?r=morphospecies/identify',
                data: {
                    'idmorphospecies':$( "#idmorphospecies" ).val(), 
                    'species':$( "#valueTextField" ).val(), 
                    'idspecies':$( "#idscientificname" ).val(),
                    'valid':$("#valid").val()
                },
                dataType: "json",
                success:function(json) {
                    filter();
                    $("#identification").dialog("close");
                }
            });
        } else {
            alert("Scientificname wasn't specified !");
        }
    }
    
    function insertLine(rs){
        var line ='<tr id="id__ID_" title="_TITLE_"><td style="text-indent:5px;">_MORPHOSPECIES_</td><td style="width:120px; text-align:center;">_QUANTITY_</td><td style="width:160px; text-align:center; text-indent:0px;">_BUTTONS_</td></tr>';
        var aux = line;

        //var btnRestricted = '<ul id="icons"><li class="ui-state-default ui-corner-all" title="Restricted Specimen Record"><span class="ui-icon ui-icon-locked"></span></a></li></ul>';
        //var btnEdit = '<ul id="icons"><li class="optionIcon ui-state-default ui-corner-all" title="Update Specimen Record"><a href="index.php?r=specimen/goToMaintain&id='+rs.id+'"><span class="ui-icon ui-icon-document"></span></a></li>';
        //var btnDelete = '<li class="optionIcon ui-state-default ui-corner-all" title="Delete Specimen Record"><a href="javascript:deleteSpecimenRecord('+rs.id+');"><span class="ui-icon ui-icon-trash"></span></a></li></ul>';
        
        var type;
        var arr = rs.morphospecies.split(" ", 2);
        var genus = arr[0];
        
        if(arr[1] == "spp.") type = "SPP" ;
        else type = "SPN";
        
        var btnList = "<div class='btnUpdate'><a href='javascript:list(\""+rs.id+"\")'><ul class='iconJQueryHover iconJQuery ui-widget ui-helper-clearfix'><li class='ui-state-default ui-corner-all' title='List Specimen Records'><span class='ui-icon ui-icon-script'></span></li></ul></a></div>";
        if(type=="SPN")
            var btnIdentification = "<div class='btnDelete'><a href='javascript:identification(\""+rs.id+"\", \""+genus+"\");'><ul class='iconJQueryHover iconJQuery ui-widget ui-helper-clearfix'><li class='ui-state-default ui-corner-all' title='Identify Morphospecies Record'><span class='ui-icon ui-icon-circle-zoomout'></span></li></ul></a></div><div style='clear:both'></div>";
        else
            var btnIdentification = "<div class='btnDelete'><a href='javascript:list(\""+rs.id+"\");'><ul class='iconJQueryHover iconJQuery ui-widget ui-helper-clearfix'><li class='ui-state-default ui-corner-all' title='Identify Morphospecies Record'><span class='ui-icon ui-icon-circle-zoomout'></span></li></ul></a></div><div style='clear:both'></div>";
            
        
        //aux = aux.replace('_TITLE_','Institution: '+rs.institution+'<br/>Collection: '+rs.collection);
        // aux = aux.replace('_ISPRIVATE_',rs.isrestricted?btnPrivate:'');
       
        aux = aux.replace('_ID_',rs.id);
        aux = aux.replace('_MORPHOSPECIES_',rs.morphospecies);
        aux = aux.replace('_QUANTITY_',rs.quantity);        
        aux = aux.replace('_BUTTONS_',btnList+btnIdentification);

        //var btnEdit = '<a href="index.php?r=specimen/goToMaintain&id='+rs.id+'"><img src="images/main/edit.png" style="border:0px;" title="Update"/></a> | ';
        //var btnReference = '<a href="#"><img src="images/main/doc.png" style="border:0px;" title="References"/></a> | ';
        //var btnMedia = '<a href="#"><img src="images/main/images.gif" style="border:0px;" title="Medias"/></a> | ';
        //var btnInteraction = '<a href="#"><img src="images/main/ic_alvo.gif" style="border:0px;" title="Interaction"/></a> | ';
        //var btnDelete = '<a href="#" onclick="javascript:deleteSpecimenRecord('+rs.id+');"><img src="images/main/canc.gif" style="border:0px;" title="Delete"/></a> | ';


        $("#lines").append(aux);
    }
      
    function configAutoComplete(){
        $( "#valueTextField" ).autocomplete({
            minLength: 1,
            source: 'index.php?r=morphospecies/searchLocal',
            select: function(event, ui ) {
                $("#valid").val(ui.item.valid);
                $("#valueTextField").val(ui.item.label);
                $("#idscientificname").val(ui.item.id);
            }			
        }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" ).data( "item.autocomplete", item ).append("<a><span id='project-label'>" +item.label + "</span> (<span id='project-level'>"+item.level+"</span>) <img id='project-icon' src='"+item.icon+"'/><br><span id='project-description'>" + item.desc + "</span></a>" )
            .appendTo( ul );
        };
    }
    
    function deleteSpecimenRecord (idspecimen)
    {
        if (confirm("Are you sure you would like to permanently delete this specimen record?"))
        {
            //Remove record
            deleteRecord(idspecimen,'specimen');

            //Hide poshytip
            $('#id_'+idspecimen).poshytip('hide');
            setTimeout(function(){
                $('#id_'+idspecimen).poshytip('destroy');
            }, 500);

            //Refresh data
            filter('delete');
        }
    }
    function slider() {
        $("#slider").slider({
            range: false,
            min:0,
            max:max - interval,
            value:start,
            stop: function(event, ui) {
                start = ui.value;
                end = start + interval;
                filter('slider');
            },
            slide:function(event, ui) {
                $('#start').html(ui.value);
                $('#end').html((ui.value + interval));
            }
        }).find( ".ui-slider-handle" ).css({
            width: handleSize
        });

    }
</script>

<div class="introText">
    <div style="float:left;"><?php echo CHtml::image("images/help/iconelist.png"); ?></div>
    <h1 style="padding-left:10px; float:left;"><?php echo Yii::t('yii', 'View morphospecies records'); ?></h1>
    <div style="clear:both;"></div>
    <p><?php echo Yii::t('yii', 'Use this tool to search through all morphospecies records in the BDD database and identify any of them. Moreover,this tool includes quick links to view the specimens records associated with their respective morphospecies.'); ?></p>
</div>

<?php echo CHtml::beginForm(); ?>
<div class="filter">
    <div class="filterLabel"><?php echo 'Filter'; ?></div>
    <div class="filterMiddle"><?php echo CHtml::link('<image style border=\'0px\' src="images/help.gif">', 'index.php?r=help&helpfield=filter', array('rel' => 'lightbox', 'style' => 'margin: 0px 10px 0px 0px;')); ?></div>
    <div class="filterInterval">
        Filtered from <b><span id="start"></span></b> to <b><span id="end"></span></b> of <b><span id="max"></span></b>
    </div>
    <div style="clear:both"></div>

    <div class="filterField">
        <input type="text" id="searchField" style="border: 1px solid #DDDDDD;background: #FFFFFF;color: #013605;font-size: 1.3em;" />
        <input type="hidden" id="id"/>
    </div>
    <div class="slider" id="slider"></div>
    <div style="clear:both"></div>
    <div class="filterList">
        <div id="filterList"></div>
    </div>
</div>
<?php echo CHtml::endForm(); ?>

<div id="rs" class="item">
    <table id="tablelist" class="list"">
           <thead><tr><th style="text-align:left;">Morphospecies</th><th>Quantity</th><th>Options</th></tr>
        </thead>
        <tbody id="lines"></tbody>
    </table>    
    <div class="legendbar">        
        <div class="updateIconLegend" style="margin-left: 145px"><?php showIcon("List Specimen Records", "ui-icon-script", 0); ?></div>
        <div class="updateIconLegendText">List Specimen Records</div>
        <div class="deleteIconLegend"><?php showIcon("Identify Morphospecies Record", "ui-icon-circle-zoomout", 0); ?></div>
        <div class="deleteIconLegendText">Identify Morphospecies Record</div>
        <div style="clear:both"></div>
    </div>    
</div>

<div id="identification">
    <div class="yiiForm" style="width: 350px; float: left; margin-left: 50px; padding-left: 10px; padding-right: 10px;">
        <table cellspacing="0" cellpadding="0" align="center" class="tablerequired">
            <tr>
                <td class="tablelabelcel" width="300px" style="text-align: left; padding-left: 10px;">
                    <?php echo 'Identification ' . $field . ': '; ?>
                </td>
            </tr>
            <tr>
                <td class="tablefieldcel" width="200px" style="padding-left: 10px;">
                    <input id="valueTextField" type="text" style="width: 200px" value="">
                    <input id="idmorphospecies" type="hidden">
                    <input id="idscientificname" type="hidden">
                    <input id="valid" type="hidden">
                </td>
                <td class="tablefieldcel" width="100px" style="padding-right: 10px;">
                    <input id="button" name="identify" type="button" value="<?php echo Yii::t('yii', "Identify"); ?>" onclick='identify()'/>
                </td>
            </tr>
        </table>
    </div>
    <div id="listSpecimens">
        
    </div>
</div>